<template>
  <div v-show="isLocked" class="lock-screen" :style="`background-image: url(${bgImg});`" @click="lockFun">
    <div class="lock-screen-content">
      <div class="timeBox">
        <div class="top_time">
          <div class="clockBox">
            <canvas ref="canvas" height="100" width="100"></canvas>
          </div>
          <div class="timeItem">
            <div class="time">{{ time.time }}</div>
            <!-- <div class="second">{{ time.second }}</div>s -->
          </div>
        </div>
        <div class="dateItem">
          <div class="date">{{ time.date }} {{ time.week }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="lockScreen">
import { ref,watch, onMounted, onBeforeUnmount, defineProps, reactive } from "vue";
import dayjs from "dayjs"; 
import one from "@/assets/images/lockBg/1.png";
import two from "@/assets/images/lockBg/2.png";
import three from "@/assets/images/lockBg/3.png";
let testBool = ref<Boolean>(false);

const props = defineProps({
  isLocked: {
    type: Boolean,
    default: false
  }
});

const bgImg = ref("");
const bgImgIndex = ref(0);
// const bgImgArr = reactive([
//   "/src/assets/images/lockBg/1.png",
//   "/src/assets/images/lockBg/2.png",
//   "/src/assets/images/lockBg/3.png"
// ]);
const bgImgArr = reactive({
  1:one,
  2:two,
  3:three
});
bgImg.value=bgImgArr[1];

const timmerBg: any = ref(null);
const timer: any = ref(null);
const time: any = ref({});

const getDate = () => {
  time.value = parseTime(new Date());
};
//   // 根据传入的时间，处理成需要的对象函数
const parseTime = time => {
  draw(time);
  let resObj: any = {};
  let week = ["日", "一", "二", "三", "四", "五", "六"];
  resObj.date = dayjs(time).format("YYYY年MM月DD日");
  resObj.week = `星期${week[dayjs(time).day()]}`;
  resObj.time = dayjs(time).format("HH:mm");
  resObj.second = dayjs(time).format("ss");
  return resObj;
};
const ctx = ref<HTMLCanvasElement | null>(null);
const canvas = ref<HTMLCanvasElement | null>(null);
//描绘时分秒小数和小数点
// 绘制表盘
const radius = 50;
const cWidth = 100;
const drawBackground = () => {
  ctx.value.save();
  // ctx.value.translate(radius, radius); //中心原点位置
  const width = cWidth;
  const height = cWidth;
  const R = width / 2; //圆半径
  const r = (R / 3) * 2;
  //设置坐标轴原点
  ctx.value.translate(width / 2, height / 2);
  // 圆心
  ctx.value.beginPath();
  // ctx.value.arc(0, 0, 10, 0, 2 * Math.PI, true);
  ctx.value.fill();
  ctx.value.closePath();
  // 表盘刻度（大格）
  ctx.value.beginPath();
  ctx.value.lineWidth = 2;
  for (var i = 0; i < 12; i++) {
    ctx.value.beginPath();
    ctx.value.strokeStyle = "rgba(255,255,255,1)";
    ctx.value.rotate(Math.PI / 6);
    ctx.value.moveTo(R, 0);
    ctx.value.lineTo(r, 0);
    ctx.value.stroke();
  }
  ctx.value.closePath();
  // 表盘刻度（小格）
  ctx.value.beginPath();
  ctx.value.lineWidth = 1;
  for (var i = 0; i < 60; i++) {
    ctx.value.beginPath();
    ctx.value.strokeStyle = "rgba(255,255,255,0.7)";
    ctx.value.rotate(Math.PI / 30);
    ctx.value.moveTo(R, 0);
    ctx.value.lineTo(R - 10, 0);
    ctx.value.stroke();
  }
  ctx.value.closePath();
};

//描绘时针
const drawHour = (hour, minute) => {
  ctx.value.save();
  ctx.value.beginPath();
  ctx.value.strokeStyle = "#FFFFFF";
  let rad = ((2 * Math.PI) / 12) * hour;
  let mrad = ((2 * Math.PI) / 12 / 60) * minute;
  ctx.value.rotate(rad + mrad);
  ctx.value.lineWidth = 4;
  ctx.value.lineCap = "round";
  ctx.value.moveTo(0, 10);
  ctx.value.lineTo(0, -radius + 30);
  ctx.value.stroke();
  ctx.value.restore();
};
//描绘分针
const drawMinute = minute => {
  ctx.value.save();
  ctx.value.beginPath();
  let rad = ((2 * Math.PI) / 60) * minute;
  ctx.value.rotate(rad);
  ctx.value.strokeStyle = "#FFFFFF";
  ctx.value.lineWidth = 3;
  ctx.value.lineCap = "round";
  ctx.value.moveTo(0, 10);
  ctx.value.lineTo(0, -radius + 20);
  ctx.value.stroke();
  ctx.value.restore();
};
//描绘秒针
const drawSecond = second => {
  ctx.value.save();
  ctx.value.beginPath();
  ctx.value.fillStyle = "#C14543";
  ctx.value.lineWidth = 2;
  ctx.value.lineCap = "round";
  let rad = ((2 * Math.PI) / 60) * second;
  ctx.value.rotate(rad);
  ctx.value.moveTo(-2, 20);
  ctx.value.lineTo(2, 20);
  ctx.value.lineTo(1, -radius + 10);
  ctx.value.lineTo(-1, -radius + 10);
  ctx.value.fill();
  ctx.value.restore();
};
//中间固定园点
const drawDot = () => {
  ctx.value.beginPath();
  ctx.value.fillStyle = "#C14543";
  ctx.value.arc(0, 0, 4, 0, 2 * Math.PI, false);
  ctx.value.fill();
};
const draw = now => {
  ctx.value.clearRect(0, 0, cWidth, cWidth);
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  drawBackground();
  drawHour(hour, minute);
  drawMinute(minute);
  drawSecond(second);
  drawDot();
  ctx.value.restore();
};


const getImageUrl=(name)=>{
  return new URL(`../assets/images/lockBg/${name}`, import.meta.url).href
}
watch(()=>props.isLocked,(newValue,olsValue)=>{
  if(!newValue){
     clearInterval(timer.value);
  timer.value = null;
   clearInterval(timmerBg.value);
  timmerBg.value = null;
  }
},{immediate:true})
onMounted(() => {
  ctx.value = canvas.value.getContext("2d");
  timer.value = setInterval(() => {
    getDate(); 
  }, 1000);

 timmerBg.value= setInterval(()=>{
     if (props.isLocked) {
      bgImgIndex.value = ((bgImgIndex.value + 1) % 3) + 1; 
      // bgImg.value = `/src/assets/images/lockBg/${bgImgIndex.value}.png`;
      bgImg.value = bgImgArr[bgImgIndex.value]; 

    }
  },1000*60*10)


});
onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
   clearInterval(timmerBg.value);
  timmerBg.value = null;
});

//   const emit = defineEmits < {
//     (e: "on-click", name: string):void
// }> ();
const emit = defineEmits(["change-locked"]);
const lockFun = () => {
  emit("change-locked");
};
</script>

<style lang="scss" scoped>
.lock-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // background-color: var(--el-color-primary-light-8);
  /* 黑色背景透明度80% */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  opacity: 1;
  z-index: 99999;
  cursor: pointer;
  /* margin: auto auto; */
}

.lock-screen-content {
  margin-top: 15%;
  text-align: center;
}

.txt {
  color: $primary-color;
  font-size: 20px;
}

.timeBox {
  width: 40%;
  border-radius: 30px;
  margin: 0 auto;

  padding: 40px 0;

  cursor: default;
  background-color: var(--el-color-primary-light-4);

  .top_time {
    display: flex;
    justify-content: center;
  }

  .clockBox {
    width: 160px;
  }

  .timeItem {
    display: flex;
    color: white;
    width: 220px;

    .time {
      font: 60px/100px "pf";
    }

    .second {
      font: 30px/30px "pf";
      margin: 45px 0 0 20px;
    }
  }

  .dateItem {
    /* width: 200px; */
    color: white;
    padding-top: 25px;
    padding-left: 40px;

    .week {
      font: 22px/22px "pf";
    }

    .date {
      margin-top: 10px;
      font: 18px/18px "pf";
    }
  }
}
</style>
